<template>
  <div>
    <a-modal :title="title" :footer="false" :visible="visible" @open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="1000px" :mask-closable="false">
      <ImpowerShop :roleId="roleId" :ownId="ownId" :info="dataPreInfo" v-if="info.dataPermissionType == 'SHOP'" />
      <ImpowerSupplier :roleId="roleId" :ownId="ownId" :info="dataPreInfo" v-if="info.dataPermissionType == 'SUPPLIER'" />
      <ImpowerWarehouse :roleId="roleId" :ownId="ownId" :info="dataPreInfo" v-if="info.dataPermissionType == 'WAREHOUSE'" />
      <ImpowerUser :userList="userList" :roleId="roleId" :ownId="ownId" :info="dataPreInfo" v-if="info.dataPermissionType == 'USER'" />
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import ImpowerShop from './impowerShop.vue'
  import ImpowerSupplier from './impowerSupplier.vue'
  import ImpowerWarehouse from './impowerWarehouse.vue'
  import ImpowerUser from './impowerUser.vue'
  import { getOrganizesUser } from '@/api/system'
  export default defineComponent({
    props: ['info', 'permissionList', 'roleId', 'ownId', 'getPermissionTreeList'],
    components: { ImpowerShop, ImpowerSupplier, ImpowerWarehouse, ImpowerUser },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        dataPreInfo: {},
        userList: [],
      })
      const title = computed(() => {
        let text = ''
        switch (props.info.dataPermissionType) {
          case 'SHOP':
            text = '数据范围-店铺'
            break
          case 'WAREHOUSE':
            text = '数据范围-仓库'
            break
          case 'SUPPLIER':
            text = '数据范围-供应商'
            break
          case 'USER':
            text = '数据范围-成员'
            break
          default:
            text = '数据范围'
            break
        }
        return text
      })
      const open = () => {
        getUserList()
        let arr = props.permissionList?.menuList || []
        let item: any = arr.find((e: any) => e.menuUrl == props.info.menuUrl)
        data.dataPreInfo = item.dataPermisson
      }

      const getUserList = async () => {
        let params = {
          depart: false,
          needRole: false,
          pageNum: 1,
          pageSize: 1000,
        }
        try {
          const res: any = await getOrganizesUser(params)
          data.userList = res?.data?.records || []
        } catch (error) {}
      }

      const handleCancel = () => {
        props.getPermissionTreeList()
        visible.value = false
      }
      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleCancel,
        title,
      }
    },
  })
</script>

<style lang="less" scoped></style>
